import StepOne from './StepOne';
import StepTwo from './StepTwo';
import StepThree from './StepThree';
import StepFour from './StepFour';
import PropTypes from 'prop-types';
import { Steps, Space, Popconfirm, message } from 'antd';
import { useState, useRef } from 'react';
import { useDispatch, connect } from 'umi';
import { PrimaryC, PrimaryGhostC } from '@/src/components';
import styles from './index.less';
import { namespace, operateTypeObj } from '@/src/newModels/pressureReport/SceneTemplateSettingsM';

const StepsContent = (props) => {
  const { onHandlePage, loading, SceneTemplateSettingsM } = props;
  const dispatch = useDispatch();
  // 每个步骤组件实例
  const StepOneIns = useRef();
  const StepTwoIns = useRef();
  const StepThreeIns = useRef();
  const StepFourIns = useRef();
  const [current, setCurrent] = useState(0); // 当前step

  // 确定按钮
  const handleSure = () => {
    const {
      stepOneState: { baseInfo },
      stepTwoState: { sceneIdInfo },
      stepThreeState,
    } = SceneTemplateSettingsM;
    const sceneTemplate = {
      sceneName: baseInfo.sceneTemplateName,
      des: baseInfo.sceneTemplateDes,
      pressMethod: 1, // 基于自定义（默认）
      correlation: 0, // 不考虑相关性（默认）
      sceneList: sceneIdInfo, // 已选择情景项
      riskNum: 3, // 因子变动数量
      priceMethod: baseInfo?.priceMethod,
      copySceneConfig: baseInfo.copySceneConfig,
      riskFactor: stepThreeState,
    };
    dispatch({
      type: `${namespace}/saveSceneTemplate`,
      payload: { sceneTemplate },
      callback: (isSuccess, res) => {
        if (isSuccess) onHandlePage(1, true);
        else message.error(res?.msg);
      },
    });
  };
  const backMainPage = () => {
    onHandlePage(1, false);
    // 返回点击重置state
    dispatch({
      type: `${namespace}/save`,
      payload: {
        copiedSceneTemplateInfo: null, // 第一步选择情景时获取到的详情数据
        operateType: operateTypeObj.add, // 新增还是编辑 ADD | EDIT, 默认新增
        stepOneState: {}, // 设置基本信息
        stepTwoState: {}, // 选择情景项
        stepThreeState: [], // 配置风险因子
        tableOldData: [], // 存放风险因子旧数据
      },
    });
  };
  const next = async () => {
    // 第一步的下一步控制
    if (current === 0) {
      const baseInfo = await StepOneIns.current?.getFormInfo();
      console.log('第一步数据', baseInfo);
      dispatch({
        type: `${namespace}/save`,
        payload: {
          stepOneState: {
            baseInfo,
          },
        },
      });
    }
    // 第二步选择情景
    if (current === 1) {
      const sceneInfo = await StepTwoIns.current?.getSelectedSceneInfo();
      console.log('第二步数据', sceneInfo);
      dispatch({
        type: `${namespace}/save`,
        payload: {
          stepTwoState: {
            ...sceneInfo,
          },
        },
      });
    }
    // 第三步配置因子
    if (current === 2) {
      await StepThreeIns.current?.submit();
    }
    await setCurrent(current + 1); // 异步等待
  };
  const prev = () => {
    setCurrent(current - 1);
  };
  const steps = [
    {
      title: '设置基本信息',
      content: <StepOne onRef={StepOneIns} />,
    },
    {
      title: '选择情景项',
      content: <StepTwo onRef={StepTwoIns} />,
    },
    {
      title: '配置风险因子',
      content: <StepThree onRef={StepThreeIns} />,
    },
    {
      title: '情景模板确认',
      content: <StepFour onRef={StepFourIns} />,
    },
  ];
  const items = steps.map((item) => ({
    key: item.title,
    title: item.title,
  }));
  return (
    <div className={styles.StepProcess}>
      <Steps current={current} items={items} />
      <div className={styles.StepsContent}>
        {steps.map((item, index) => {
          return (
            <div key={item.key} style={current === index ? { display: 'block' } : { display: 'none' }}>
              {item.content}
            </div>
          );
        })}
      </div>
      <div className={styles.StepsAction}>
        <Space>
          {current > 0 && <PrimaryC onClick={() => prev()} title={'上一步'} />}
          {current < steps.length - 1 && <PrimaryC loading={loading} title={current === 0 ? '根据压测情景配置因子' : '下一步'} onClick={() => next()} />}
          {/* {current === 0 && <PrimaryC title={'根据因子查看影响情景'} onClick={() => {}} />} */}
          {current === steps.length - 1 && <PrimaryC title={'确定'} onClick={() => handleSure()} />}
          <Popconfirm overlayClassName={styles.BackPopConfirm} title='是否返回列表页？' onConfirm={backMainPage} onCancel={() => {}}>
            <PrimaryGhostC title={'返回'} />
          </Popconfirm>
        </Space>
      </div>
    </div>
  );
};
StepsContent.propTypes = {
  onHandlePage: PropTypes.func, // 切换页面
};
export default connect(({ loading, SceneTemplateSettingsM }) => ({ loading: loading.effects[`${namespace}/getSceneTemplateDetail`], SceneTemplateSettingsM }))(StepsContent);
